<!--
 * @由于个人水平有限, 难免有些错误, 还请指点:  
 * @Author: cpu_code
 * @Date: 2020-10-19 23:07:02
 * @LastEditTime: 2020-10-20 21:02:37
 * @FilePath: \web\javascript\dynamic_table\dynamic_table.html
 * @Gitee: [https://gitee.com/cpu_code](https://gitee.com/cpu_code)
 * @Github: [https://github.com/CPU-Code](https://github.com/CPU-Code)
 * @CSDN: [https://blog.csdn.net/qq_44226094](https://blog.csdn.net/qq_44226094)
 * @Gitbook: [https://923992029.gitbook.io/cpucode/](https://923992029.gitbook.io/cpucode/)
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态表格</title>

        <style>
            table{
                border: 1px solid;
                margin: auto;
                width: 500px;
            }

            td,th{
                text-align: center;
                border: 1px solid;
            }

            div{
                text-align: center;
                margin: 50px;
            }
        </style>
    </head>

    <body>
        <div>
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入姓名">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" value="添加" id="btn_add">
        </div>

        <table>
            <caption>学生信息表</caption>

            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>操作</th>
            </tr>

            <tr>
                <td>1</td>
                <td>cpucode</td>
                <td>男</td>
                <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
            </tr>

            <tr>
                <td>2</td>
                <td>cpu</td>
                <td>女</td>
                <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
            </tr>

            <tr>
                <td>3</td>
                <td>哈哈</td>
                <td>?</td>
                <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
            </tr>
        </table>

        <script>
            /*
                分析：
                    1.添加：
                        1. 给添加按钮绑定单击事件
                        2. 获取文本框的内容
                        3. 创建td，设置td的文本为文本框的内容。
                        4. 创建tr
                        5. 将td添加到tr中
                        6. 获取table，将tr添加到table中
                    2.删除：
                        1.确定点击的是哪一个超链接
                            <a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
                        2.怎么删除？
                            removeChild():通过父节点删除子节点
            */

/*
            //1.获取按钮
            // 第一种
             document.getElementById("btn_add").onclick = function(){
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var gender = document.getElementById("gender").value;

                //3.创建td，赋值td的标签体
                var td_id = document.createElement("td");
                var text_id = document.createTextNode(id);
                td_id.appendChild(text_id);

                //name 的 td
                var td_name = document.createElement("td");
                var text_name = document.createTextNode(name);
                td_name.appendChild(text_name);

                //gender 的 td
                var td_gender = document.createElement("td");
                var text_dender = document.createTextNode(gender);
                td_gender.appendChild(text_dender);

                //a标签的td
                var td_a = document.createElement("td");
                var ele_a = document.createElement("a");
                ele_a.setAttribute("href", "javascript:void(0);");
                ele_a.setAttribute("onclick", "delTr(this);");
                var text_a = document.createTextNode("删除");
                ele_a.appendChild(text_a);
                td_a.appendChild(ele_a);

                //创建tr
                var tr = document.createElement("tr");
                //添加td到tr中
                tr.appendChild(td_id);
                tr.appendChild(td_name);
                tr.appendChild(td_gender);
                tr.appendChild(td_a);
                //6.获取table
                var table = document.getElementsByTagName("table")[0];
                table.appendChild(tr);
            }
*/

            //使用innerHTML添加
            // 第一种
            document.getElementById("btn_add").onclick = function(){
                //2.获取文本框的内容
                var id = document.getElementById("id").value;
                var name = document.getElementById("name").value;
                var gender = document.getElementById("gender").value;
                //获取table
                var table= document.getElementsByTagName("table")[0];
                //追加一行
                table.innerHTML += "<tr>\n" +
                                "    <td>" + id + "</td>\n" +
                                "    <td>" + name + "</td>\n" + 
                                "    <td>" + gender + "</td>\n" + 
                                "    <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" + 
                                "    </tr>";
            } 
            
            //删除方法
            function delTr(obj){
                var table = obj.parentNode.parentNode.parentNode;
                var tr = obj.parentNode.parentNode;

                table.removeChild(tr);
            }
        </script>
    </body>
</html>